<template>
  <div class="photo">
    <middle-title title="活动照片墙"></middle-title>
    <div class="content">
      <el-carousel :interval="5000" indicator-position="outside">
        <el-carousel-item v-for="(item, index) in Math.ceil(dataList.length / 2)" :key="item">
          <div class="photobox">
            <div
              class="photoItem"
              v-for="(it, id) in dataList.slice(index * 2, (index + 1) * 2)"
              :key="id"
            >
              <div class="topImage">
                <el-image style="width: 100%; height: 100%" :src="it.image" fit="fill" />
              </div>
              <div class="labelTitle">{{ it.label }}</div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
let dataList = ref([
  {
    image: '',
    label: 'XXXXXXX'
  },
  {
    image: '',
    label: 'XXXXXXX'
  },
  {
    image: '',
    label: 'XXXXXXX'
  },
  {
    image: '',
    label: 'XXXXXXX'
  },
  {
    image: '',
    label: 'XXXXXXX'
  },
  {
    image: '',
    label: 'XXXXXXX'
  }
])
</script>
<style scoped lang="scss">
.photo {
  .content {
    height: 400px;
    :deep(.el-carousel__container) {
      height: 400px;
    }
    // background-color: red;
    .photobox {
      display: flex;
      justify-content: space-between;
      margin-left: 10px;
      .photoItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        .topImage {
          width: 229px;
          height: 267px;
          border: 1px solid rgba(47, 122, 183, 0.7);
          margin-top: 29px;
        }
        .labelTitle {
          margin-top: 18px;
          width: 202px;
          height: 42px;
          box-sizing: border-box;
          background: url('@/assets/images/secondpage/photoLabel.png') no-repeat;
          background-size: 100% 100%;
          font-size: 25px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
          text-align: center;
        }
      }
    }
  }
}
</style>
